<!-- 积分余额 -->
<template>
	<view class="page_box">
		<view class="head_box"  :style="{ backgroundImage: 'url(' + $IMG_URL+info.bg_image + ')' }">
			<shopro-navbar :background="{ background: 'none' }" :backTextStyle="backTextStyle" backIconColor="#fff">
				<view class="" style="color: #fff;" slot="content">
					会员中心
				</view>
			</shopro-navbar>
			<view class="hview">
				<image class="score-card-bg" :src="info.vip_image?$IMG_URL + info.vip_image:$IMG_URL + '/imgs/user/money_wallet_bg.png'" mode=""></image>
				<view class="cardview">
					<text class="pname">{{ info.name }}</text>
					<text class="pmiao">{{info.tip}}</text>
				</view>
			</view>
		</view>
		<view class="content_box">
			<view class="titem">
				<!-- <image class="tivimg" src="/static/images/cuowu.png" mode="" /> -->
				<text>会员权益</text>
			</view>
			<view class="jiview">
				<scroll-view class="jilist" scroll-x>
					<!-- <view class="jiitem" @tap="jump('/pages/user/new/Huiyuan')">
						<text class="jname">普通会员(限时免费)</text>
						<text class="jmiao">(合作商家)</text>
					</view> -->
					<view class="jiitem" v-for="(item,index) in info.quanyi" :key="index">
						<image
							:src="$IMG_URL+item.image"
							mode=""
							class="jiimgs"
						/>
						<view class="jinews">
							<text class="jname">{{item.title}}</text>
							<text class="jmiao">{{item.tip}}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="titem" style="margin-top: 50rpx;">
				<!-- <image class="tivimg" src="/static/images/cuowu.png" mode="" /> -->
				<text>特权对比</text>
			</view>
		<!-- 	<view class="teview">
				<view class="teone" :style="index == 0?'color:'+info.color2+'':''" v-for="(item,index) in info.table" :key="index">
					<view class="tename"  :style="Number(info.index) == ind?'color:'+info.color1+'':ind!=0?'':''" v-for="(i,ind) in item">{{i}}</view>
				</view>
			</view> -->
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<!-- <view class="teviewtwo">
					<view class="teone">
						<view class="tename">服务内容</view>
						<view class="tename bgone hong">*</view>
						<view class="tename bgone">服务内容</view>
						<view class="tename bgone">服务内容</view>
						<view class="tename bgone">服务内容</view>
						<view class="tename bgone">服务内容</view>
						<view class="tename bgone">服务内容</view>
					</view>
					<view class="teone">
						<view class="tename">服务内容</view>
						<view class="tename hong">10%</view>
						<view class="tename">服务内容</view>
						<view class="tename">服务内容</view>
						<view class="tename">服务内容</view>
					</view>
					<view class="teone">
						<view class="tename">服务内容</view>
						<view class="tename bgone hong">*</view>
						<view class="tename bgone">服务内容</view>
						<view class="tename bgone">服务内容</view>
						<view class="tename bgone">服务内容</view>
					</view>
				</view> -->
				<view class="teviewtwo">
					<view class="teone" :style="index == 0?'color:'+info.color2+'':''" v-for="(item,index) in info.table" :key="index">
						<view class="tename"  :style="Number(info.index) == ind?'color:'+info.color1+'':ind!=0?'':''" v-for="(i,ind) in item">{{i}}</view>
					</view>
				</view>
				
			</scroll-view>
			
			

			<view class="jihuo" @click="getjihuo" :style="{ backgroundColor: info.color3, color: '#fff' }">立即激活</view>
		</view>

		<u-popup v-model="zhipop" :closeable="true" @close="zhipop=false" width="90%" mode="center">
			<view class="week">
				<text class="ztit">请选择支付方式</text>
				<view class="zhione">
					<text class="vleft">Vip会员</text>
					<text class="vleft rval" v-if="yinum==1">{{info.money||0}}</text>
					<text class="vleft rval" v-if="yinum==2">{{info.price||0}}</text>
				</view>
				<view class="xuti">
					您需要支付{{info.price||0}}用于激活会员,请选择您的付款方式
				</view>
				<view class="yihuo">
					<view class="tiitem" @click="getyi(1)">
						<text class="tiname">易货额账户支付</text>
						<u-icon class="ml" name="checkmark-circle-fill" v-if="yinum==1" color="#f3582d" size="45"></u-icon>
						<u-icon class="ml" name="checkmark-circle" v-if="yinum==2" color="#666" size="45"></u-icon>
					</view>
					<view class="tiitem" @click="getyi(2)">
						<text class="tiname">现金账户支付</text>
						<u-icon class="ml" name="checkmark-circle-fill" v-if="yinum==2" color="#f3582d" size="45"></u-icon>
						<u-icon class="ml" name="checkmark-circle" v-if="yinum==1" color="#666" size="45"></u-icon>
					</view>
				</view>
				<view class="lizhi" @click="getzhifu">立即支付</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			isEmpty: false,
			tabCur: 'all',
			scoreLog: [],
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
			backTextStyle:{
				color:'#fff'
			},
			id:'',
			info:{},
			oneclass:{
				color:'#fa9f26'
			},
			hong:{
				color:'red'
			},
			zhipop:false,
			yinum:1,//1易货 2现金
		};
	},
	computed: {
		// ...mapGetters(['userInfo'])
	},
	onLoad(option) {
		if(option.id){
			this.id = option.id
		}

		this.getDetail();
	},
	methods: {
		getDetail() {
			let that = this;
			that.$http('home.vipContent', {
				id: that.id
			}).then(res => {
				if (res.code === 1) {
					that.info = res.data

					that.oneclass.color = res.data.color2
					that.hong.color = res.data.color1
					console.log(that.info.color2)
				}
			});
		},
		getjihuo(){
			this.zhipop = true
		},
		getyi(e){

			this.yinum = e
		},
		getzhifu(){
			if(this.yinum == 1){//易货
				let that = this;
				that.$http('home.addOrderByMoney', {
					level_id: that.id
				}).then(res => {
					if (res.code === 1) {
						that.$u.toast(res.msg);
						this.zhipop = false
					}
				});
			}else if(this.yinum == 2){//现金
				let that = this;
				that.$http('home.addOrderByPrice', {
					level_id: that.id
				}).then(res => {
					if (res.code === 1) {
						that.$http('home.payprice', {
							order_id: res.data.order_id
						}).then(res => {
							if (res.code === 1) {
								console.log(res)
								let that = this;
								let data = res.data.pay_data
								uni.requestPayment({
									appId: data.appId,
									nonceStr: data.nonceStr,
									package: data.package,
									paySign: data.paySign,
									signType: data.signType,
									timeStamp: data.timeStamp,
									success: (e) => {
										console.log(e)
										// this.GetUserBaseInfo()
										// this.gethuiyuan()
										// this.navrouter("/pages_subject/twoPage/XieYiDetail?id="+this.id);
										// uni.switchTab({ url: '/pages/tabbar/Tabhome' })
										// this.paySuccess();
										this.$u.toast("支付成功");
										this.zhipop = false
									},
									fail: (e) => {
										console.log(e)
										this.$u.toast("支付失败");
										// uni.switchTab({ url: '/pages/tabbar/my' })
										// uni.showModal({
										//     content: "支付失败,原因为: " + e.errMsg,
										//     showCancel: false
										// })
									}
								})
								// uni.requestPayment({
								// 	provider: 'wxpay',
								// 	orderInfo:res.data.pay_data,
								// 	success: res => {
								// 		that.$u.toast('支付成功');
								// 		this.zhipop = false
								// 	},
								// 	fail: err => {
								// 		console.log('支付取消或者失败:', err);
								// 		err.errMsg !== "requestPayment:fail cancel" && that.payResult('fail')
								// 	}
								// });
							}
						});
					}
				});
			}
			
		},
		
	}
};
</script>

<style lang="scss">
.page_box {
	background: #fff;
	.head_box {
		width: 750rpx;
		height: 480rpx;
		// background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 40%, rgba(255, 255, 255, 1) 100%) no-repeat;
		position: relative;
		.all-box {
			height: 360rpx;
			padding-bottom: var(--status-bar-height);
			.all-num {
				font-size: 50rpx;
				font-weight: 500;
				color: #a8700d;
				margin-bottom: 20rpx;
			}
			.all-title {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(168, 112, 13, 1);
			}
			.score-card-bg {
				width: 100%;
				height: 90rpx;
			}
		}
		.tab-box {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			width: 710rpx;
			height: 90rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 30rpx 30rpx 0px 0px;
			border-bottom: 1rpx solid #dfdfdf;
			padding: 0 30rpx;
			.tab-item {
				flex: 1;
				.tab-name {
					display: inline-block;
					font-size: 30rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					border-bottom: 4rpx solid transparent;
					line-height: 86rpx;
				}
				.tab-active {
					border-bottom: 4rpx solid rgba(213, 166, 90, 1);
				}
			}
		}
	}
}
.item-box {
	background: #fff;
	min-height: 150rpx;
	border-bottom: 1rpx solid #dfdfdf;
	padding: 30rpx;
	.name {
		font-size: 28rpx;

		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 28rpx;
		margin-bottom: 20rpx;
	}
	.time {
		font-size: 24rpx;

		font-weight: 500;
		color: rgba(196, 196, 196, 1);
		line-height: 24px;
	}
	.num {
		font-size: 30rpx;

		font-weight: 500;
		color: #e6b873;
	}
}
.hview{
	position: relative;
	margin:50rpx 30rpx 0;
	height: 250rpx;
	border-radius: 10rpx 10rpx 0 0;
	.score-card-bg{
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 10rpx 10rpx 0 0;
	}
	.cardview{
		position: relative;
		padding: 40rpx;
		.pname{
			color: #fff;
			font-size: 40rpx;
			font-weight: 500;
		}
		.pmiao{
			display: block;
			margin-top: 10rpx;
			color: #fff;
			font-weight: 400;
		}
	}
}
.content_box{
	border-radius: 20rpx 20rpx 0 0;
	position: relative;
	margin-top: -30rpx;
	// height: 409rpx;
	margin-top: -46px;
    background-color: #fff;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	.qview{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.titem{
		display: flex;
		flex-direction: row;
		align-items: center;
		.tivimg{
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		text{
			display: inline-block;
			color: #333;
			font-weight: 400;
		}
	}
	.jiview{
		margin-top: 20rpx;
		.jilist{
			white-space: nowrap;
			.jiitem{
				margin-right: 20rpx;
				height: 180rpx;
				width: 310rpx;
				border-radius: 10rpx;
				display: inline-block;
				position: relative;
				// justify-content: center;
				// padding-left: 20rpx;
				// padding-top: 30rpx;
				// flex-direction: column;
				.jiimgs{
					position: absolute;
					width: 100%;
					height: 100%;
				}
				.jinews{
					position: relative;
					width: 100%;
					height: 100%;
					padding-left: 20rpx;
					padding-top: 30rpx;
					flex-direction: column;
				}
				.jname{
					color: #fff;
					font-size: 28rpx;
					font-weight: 400;
				}
				.jmiao{
					color: #fff;
					font-size: 25rpx;
					font-weight: 400;
					display: block;
					margin-top: 10rpx;
				}
			}
		}
	}
}
.teview{
	margin-top: 10rpx;
	display: flex;
	flex-direction: column;
	.teone{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 25rpx 0;
		color: #333;
		
		.tename{
			
			width: 20%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			font-weight: normal;
			text-align: center;
		}
		.bgone{
			color: #fa9f26;

		}
		.hong{
			color: red;
			font-weight: 500;
		}
	}
	.oneclass{
		.tename{
			color: #fa9f26;
		}
	}
	.bgtwo{
		background-color: rgba(254,253,237,1);

	}
}
.teviewtwo{
	margin-top: 10rpx;
	display: flex;
	flex-direction: column;
	.teone{
		// display: flex;
		// flex-direction: row;
		// align-items: center;
		padding: 25rpx 0;
		color: #333;
		white-space: nowrap;
		
		
		.tename{
			
			width: 140rpx;
			display: inline-block;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			font-weight: normal;
			text-align: center;
		}
		.bgone{
			color: #fa9f26;

		}
		.hong{
			color: red;
			font-weight: 500;
		}
	}
	.oneclass{
		.tename{
			color: #fa9f26;
		}
	}
	.bgtwo{
		background-color: rgba(254,253,237,1);

	}
}
.jihuo{
	margin-top: 40rpx;
	border-radius: 10rpx;
	padding: 30rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fa9f26;
	color: #fff;
	font-size: 28rpx;
	font-weight: normal;
}
/deep/.u-mode-center-box{
	background-color: transparent !important;
}
.week{
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx 50rpx;
	.ztit{
		color: #333;
		font-weight: 500;
		font-size: 32rpx;
		display: block;
		text-align: center;
	}
	.zhione{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 30rpx 0;
		.vleft{
			color: #333;
			font-weight: normal;
			font-size: 28rpx;
		}
		.rval{
			margin-left: auto;
			
		}
	}
	.xuti{
		border: 1rpx solid rgba(224,175,179,1);
		background-color: rgba(254,233,224,1);
		padding: 10rpx 20rpx;
		color: #f3582d;
		font-size: 25rpx;
		font-weight: normal;
		border-radius: 20rpx;
	}
	.yihuo{
		display: flex;
		flex-direction: column;
		margin: 50rpx 0 20rpx;
		.tiitem{
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			padding: 25rpx 0;
			.tiname{
				color: #333;
				font-size: 30rpx;
				font-weight: 500;
			}
			.ml{
				margin-left: auto;
			}
			.quan{
				width: 40rpx;
				height: 40rpx;
				border: 1rpx solid #666;
				border-radius: 50%;
			}
		}
	}
	.lizhi{
		height: 88rpx;
		width: 100%;
		position: relative;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		background-color: rgba(233,64,26,1);
		margin-top: 60rpx;
	}
}
</style>
